﻿<!doctype html>
<html lang="zh-cn">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>第一个礼物</title>
    <meta name="keywords" content="xxx的告白" />
    <meta name="description" content="欧阳宝贝，我爱你爱你" />
    <meta name="Author" content="胡某人">
    <meta name="Copyright" content="itbyc.com">
    <link type="text/css" rel="stylesheet" href="./renxi/default.css">
    <link rel="icon" href="1.ico">
</head>

<body>
    <audio autoplay loop>
        <source src="Westlife - My Love.mp3" type="audio/mp3" />
    </audio>
    <div id="main">
        <div id="wrap">
            <div id="text" style="margin-top: -50px;">
                <div id="code">
                    <font color="#FF3030">

                        <span class="say">2021年7月19日21点10分</span><br>
                        <span class="say">你回答我</span><br>
                        <span class="say">喜欢</span><br>
                        <span class="say"><span class="space"></span> ---- 三行情书</span>
                        <!-- <span
                            class="say">宝贝，我现在还是想这样继续叫你，因为我不知道，以后还有没有机会再对你说出这两个字，不知不觉，我们似乎走的越来越远了，我看在心里，也很明白，但是我依然觉得，认识了你真的是超级幸运的一件事。这是我人生中最美好的回忆之一，似乎也只是回忆了，我曾经单纯的以为，只要足够爱，就能战胜一切，生活和现实就是对我最好的老师。
                            我每天都会想你，会悄悄的关注你，我屏蔽了你的朋友圈，将我们的聊天设为免打扰，除了拉黑删除你，我用尽了全力，想象着你能淡出我的生活，我却又忍不住每天想你的时候，悄悄打开你的朋友圈，就想远远的看看你，你确实过的很好，每天还是那么的开开心心，快快乐乐。
                            其实我也过的很好阿，人永远都要为自己而活，自己活的不精彩，也指望不了别人带给你精彩，最让我难受的是，我真的开始习惯了没有你了，我依然爱你，但是爱就像一个沙漏，每一天都在流逝，我不知道该如何面对你了，好像我们还没有开始就已经结束了，现在想到你，我更多的是心酸，无奈，已经感慨命运的捉弄。
                            曾经说起你的名字，就会让我骄傲，想到你，我有勇气去对抗一切，现在我只有在一个普通的深夜，靠着一点酒精才能让自己封闭的情感得到一个小小的宣泄口。
                            对啊你也看不到这个了，因为我总是用我自以为是的方式去爱你，去给你我最好的，而我也没有问过你，你想要的是我想给你的吗？我的礼物，和我，似乎都只是你新鲜感的玩意儿，当新鲜褪去，一切也就失去了魅力了，不是吗？我打算走啦，换一个新的开始，换一个新的环境，当沙漏走完的时候。
                        </span><br> -->
                        <!-- <span class="say">不知不觉，我们似乎走的越来越远了，我看在心里，也很明白，但是我依然觉得，认识了你真的是超级幸运的一件事。</span><br> -->
                        <!-- <span class="say">这是我人生中最美好的回忆之一，似乎也只是回忆了</span><br> -->
                        <!-- <span class="say">我曾经单纯的以为，只要足够爱，就能战胜一切</span><br> -->
                        <!-- <span class="say">生活和现实就是对我最好的老师</span><br> -->
                        <!-- <span class="say">我每天都会想你，会悄悄的关注你，我屏蔽了你的朋友圈，将我们的聊天设为免打扰，除了拉黑删除你，我用尽了全力，想象着你能淡出我的生活</span><br>
                        <span class="say">我却又忍不住每天想你的时候，悄悄打开你的朋友圈，就想远远的看看你</span><br>
                        <span class="say">你确实过的很好，每天还是那么的开开心心，快快乐乐</span><br>
                        <span class="say">其实我也过的很好阿，人永远都要为自己而活，自己活的不精彩，也指望不了别人带给你精彩</span><br>
                        <span class="say">最让我难受的是，我真的开始习惯了没有你了，我依然爱你，但是爱就像一个沙漏，每一天都在流逝</span><br>
                        <span class="say">我不知道该如何面对你了，好像我们还没有开始就已经结束了</span><br>
                        <span class="say">现在想到你，我更多的是心酸，无奈，已经感慨命运的捉弄</span><br>
                        <span class="say">曾经说起你的名字，就会让我骄傲，想到你，我有勇气去对抗一切</span><br>
                        <span class="say">现在我只有在一个普通的深夜，靠着一点酒精才能让自己封闭的情感得到一个小小的宣泄口</span><br>
                        <span class="say">对啊你也看不到这个了，因为我总是用我自以为是的方式去爱你，去给你我最好的</span><br>
                        <span class="say">而我也没有问过你，你想要的是我想给你的吗？</span><br>
                        <span class="say">我的礼物，和我，似乎都只是你新鲜感的玩意儿，当新鲜褪去，一切也就失去了魅力了，不是吗？</span><br>
                        <span class="say">我打算走啦，换一个新的开始，换一个新的环境，当沙漏走完的时候</span><br> -->

                    </font>
                </div>
            </div>
            <div id="clock-box">
                <span class="STYLE1"></span>
                <font color="#EE3B3B">我们在一起</font>
                <span class="STYLE1">已经有</span>
                <div id="clock"></div>
            </div>
            <canvas id="canvas" width="1100" height="680"></canvas>
        </div>

    </div>
    <script type="text/javascript" src="./renxi/jquery.min.js"></script>
    <script type="text/javascript" src="./renxi/jscex.min.js"></script>
    <script type="text/javascript" src="./renxi/jscex-parser.js"></script>
    <script type="text/javascript" src="./renxi/jscex-jit.js"></script>
    <script type="text/javascript" src="./renxi/jscex-builderbase.min.js"></script>
    <script type="text/javascript" src="./renxi/jscex-async.min.js"></script>
    <script type="text/javascript" src="./renxi/jscex-async-powerpack.min.js"></script>
    <script type="text/javascript" src="./renxi/functions.js" charset="utf-8"></script>
    <script type="text/javascript" src="./renxi/love.js" charset="utf-8"></script>
    <script>
        (function () {
            var canvas = $('#canvas');

            if (!canvas[0].getContext) {
                $("#error").show();
                return false;
            }

            var width = canvas.width();
            var height = canvas.height();

            canvas.attr("width", width);
            canvas.attr("height", height);

            var opts = {
                seed: {
                    x: width / 2 - 20,
                    color: "rgb(190, 26, 37)",
                    scale: 2
                },
                branch: [
                    [535, 680, 570, 250, 500, 200, 30, 100, [
                        [540, 500, 455, 417, 340, 400, 13, 100, [
                            [450, 435, 434, 430, 394, 395, 2, 40]
                        ]],
                        [550, 445, 600, 356, 680, 345, 12, 100, [
                            [578, 400, 648, 409, 661, 426, 3, 80]
                        ]],
                        [539, 281, 537, 248, 534, 217, 3, 40],
                        [546, 397, 413, 247, 328, 244, 9, 80, [
                            [427, 286, 383, 253, 371, 205, 2, 40],
                            [498, 345, 435, 315, 395, 330, 4, 60]
                        ]],
                        [546, 357, 608, 252, 678, 221, 6, 100, [
                            [590, 293, 646, 277, 648, 271, 2, 80]
                        ]]
                    ]]
                ],
                bloom: {
                    num: 700,
                    width: 1080,
                    height: 650,
                },
                footer: {
                    width: 1200,
                    height: 5,
                    speed: 10,
                }
            }

            var tree = new Tree(canvas[0], width, height, opts);
            var seed = tree.seed;
            var foot = tree.footer;
            var hold = 1;

            canvas.click(function (e) {
                var offset = canvas.offset(),
                    x, y;
                x = e.pageX - offset.left;
                y = e.pageY - offset.top;
                if (seed.hover(x, y)) {
                    hold = 0;
                    canvas.unbind("click");
                    canvas.unbind("mousemove");
                    canvas.removeClass('hand');
                }
                var audio = document.getElementsByTagName("audio")[0];
                audio.play();
            }).mousemove(function (e) {
                var offset = canvas.offset(),
                    x, y;
                x = e.pageX - offset.left;
                y = e.pageY - offset.top;
                canvas.toggleClass('hand', seed.hover(x, y));
            });

            var seedAnimate = eval(Jscex.compile("async", function () {
                seed.draw();
                while (hold) {
                    $await(Jscex.Async.sleep(10));
                }
                while (seed.canScale()) {
                    seed.scale(0.95);
                    $await(Jscex.Async.sleep(10));
                }
                while (seed.canMove()) {
                    seed.move(0, 2);
                    foot.draw();
                    $await(Jscex.Async.sleep(10));
                }
            }));

            var growAnimate = eval(Jscex.compile("async", function () {
                do {
                    tree.grow();
                    $await(Jscex.Async.sleep(10));
                } while (tree.canGrow());
            }));

            var flowAnimate = eval(Jscex.compile("async", function () {
                do {
                    tree.flower(2);
                    $await(Jscex.Async.sleep(10));
                } while (tree.canFlower());
            }));

            var moveAnimate = eval(Jscex.compile("async", function () {
                tree.snapshot("p1", 240, 0, 610, 680);
                while (tree.move("p1", 500, 0)) {
                    foot.draw();
                    $await(Jscex.Async.sleep(10));
                }
                foot.draw();
                tree.snapshot("p2", 500, 0, 610, 680);


                canvas.parent().css("background", "url(" + tree.toDataURL('image/png') + ")");
                canvas.css("background", "#ffe");
                $await(Jscex.Async.sleep(300));
                canvas.css("background", "none");
            }));

            var jumpAnimate = eval(Jscex.compile("async", function () {
                var ctx = tree.ctx;
                while (true) {
                    tree.ctx.clearRect(0, 0, width, height);
                    tree.jump();
                    foot.draw();
                    $await(Jscex.Async.sleep(25));
                }
            }));

            var textAnimate = eval(Jscex.compile("async", function () {
                var together = new Date();
                together.setFullYear(2020, 6, 19); //时间年月日
                together.setHours(21); //小时	
                together.setMinutes(0); //分钟
                together.setSeconds(0); //秒前一位
                together.setMilliseconds(2); //秒第二位

                $("#code").show().typewriter();
                $("#clock-box").fadeIn(500);
                while (true) {
                    timeElapse(together);
                    $await(Jscex.Async.sleep(1000));
                }
            }));

            var runAsync = eval(Jscex.compile("async", function () {
                $await(seedAnimate());
                $await(growAnimate());
                $await(flowAnimate());
                $await(moveAnimate());

                textAnimate().start();

                $await(jumpAnimate());
            }));

            runAsync().start();
        })();
    </script>
</body>

</html>